<template>
    <div id="dr16">
        <div>
            <Breadcrumb style="margin-bottom: 10px">
                <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
                <BreadcrumbItem>运营平台分析</BreadcrumbItem>
                <BreadcrumbItem>注册用户角色分析</BreadcrumbItem>
            </Breadcrumb>
            <DatePicker v-model="startTime" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
            至
            <DatePicker v-model="endTime" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
            &nbsp;
            <Button type="info" @click="search()">查询</Button>
        </div>
        <div style="width: 80%;margin-top: 20px;">
            <ve-pie :data="chartData" style="width: 100%"></ve-pie>
        </div>
        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';
    export default{
        data(){
            this.chartSettings = {
                roseType: 'radius'
            }
            return {
                endTime: "",
                startTime: "",
                loading: false,
                chartData: {
                    columns: ['类型', 'number'],
                    rows: [
                        {'类型': '司机', 'number': 1393},
                        {'类型': '配件商', 'number': 3530},
                        {'类型': '修理', 'number': 2923},
                        {'类型': '流动补胎', 'number': 1723},
                        {'类型': '审车', 'number': 3792},
                        {'类型': '加油', 'number': 4593},
                        {'类型': '吊车', 'number': 4593}
                    ]
                }
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            search(){
                this.getData();
            },
            getData(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('blacklistStatus', "2");
                param.append('userType', this.type);

                if (this.startTime) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "analysis/userRoleAnalysis", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                this.chartData.rows[0].number = res.data.data.driverCount;
                                this.chartData.rows[1].number = res.data.data.productsBusinessCount;
                                this.chartData.rows[2].number = res.data.data.repairCount;
                                this.chartData.rows[3].number = res.data.data.tyreRepairCount;
                                this.chartData.rows[4].number = res.data.data.vehicleInspectionCount;
                                this.chartData.rows[5].number = res.data.data.putOilCount;
                                this.chartData.rows[6].number = res.data.data.hoistCount;
                                this.loading = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>